<template>
	<el-container>
		<el-header>挂号界面</el-header>

		<el-row :gutter="20">
			<el-col :span="12">
				<div class="grid-content bg-purple-light">
					<el-main>患者个人基本资料</el-main>
				</div>
			</el-col>
			<el-col :span="12">
				<div class="grid-content bg-purple-light">
					<el-main>挂号详情</el-main>
				</div>
			</el-col>
		</el-row>

		<el-row :gutter="20">
			<el-col :span="12">
				<div>


					<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
						<el-form-item label="病历号" prop="patid" style="width: 500px;">
							<el-col :span="19">
								<el-input v-model="ruleForm.patid" placeholder="请输入病历号"></el-input>
							</el-col>
							<el-col :span="4">
								<el-button@click="Query()">查询</el-button>
							</el-col>
						</el-form-item>

						<el-form-item label="姓名" prop="name" style="width: 500px;">
							<el-input v-model="ruleForm.name" placeholder="姓名"></el-input>
						</el-form-item>

						<el-form-item label="性别" prop="gender" style="">
							<el-select v-model="ruleForm.gender" placeholder="请选择性别">
								<el-option label="男" value="1"></el-option>
								<el-option label="女" value="0"></el-option>
							</el-select>
						</el-form-item>

						<el-form-item label="出生日期">
							<el-col :span="11">
								<el-form-item prop="birth">
									<el-date-picker placeholder="请选择出生日期" v-model="ruleForm.birth" style="width: 100%;">
									</el-date-picker>
								</el-form-item>
							</el-col>
						</el-form-item>
						<!-- 						<el-form-item label="出生日期" prop="name" style="width: 500px;">
							<el-input v-model="ruleForm.name" placeholder="姓名"></el-input>
						</el-form-item>	 -->

						<el-form-item label="身份证号码" prop="id_information" style="width: 500px;">
							<el-input v-model="ruleForm.id_information" placeholder="身份证号码"></el-input>
						</el-form-item>

						<el-form-item label="家庭地址" prop="address" style="width: 500px;">
							<el-input v-model="ruleForm.address" placeholder="家庭地址"></el-input>
						</el-form-item>
						<el-form-item label="联系电话" prop="tel" style="width: 500px;">
							<el-input v-model="ruleForm.tel" placeholder="联系电话"></el-input>
						</el-form-item>
					</el-form>

				</div>
			</el-col>


			<el-col :span="12">
				<div>
					<el-form :model="dataForm" :rules="rules" ref="dataForm" label-width="100px" class="demo-dataForm">
						<el-form-item label="看诊日期" required>
							<el-col :span="11">
								<el-form-item prop="watchdate1">
									<el-date-picker placeholder="选择日期" v-model="dataForm.watchdate1"
										style="width: 100%;"></el-date-picker>
								</el-form-item>
							</el-col>
							<!-- <el-col class="line" :span="3">午别</el-col> -->
							<el-col :span="12">
								<!-- <el-form-item prop="watchdate3">
									<el-time-picker placeholder="选择时间" v-model="ruleForm.watchdate3" style="width: 100%;">
									</el-time-picker>
								</el-form-item> -->
								<el-form-item label="午别" prop="watchdate2" style="width: 100%;">
									<el-select v-model="dataForm.watchdate2" placeholder="请选择午别">
										<el-option label="上午" value="上午"></el-option>
										<el-option label="下午" value="下午"></el-option>
									</el-select>
								</el-form-item>
							</el-col>
						</el-form-item>

						<el-form-item label="挂号科室" prop="room">
							<el-col :span="11">
								<el-select v-model="dataForm.room" placeholder="请选择挂号科室" filterable>
									<!-- <el-option v-for="doctor in kl" :label="doctor" :value="doctor"></el-option> -->
									<el-option label="内科" value="内科"></el-option>
									<el-option label="儿科" value="儿科"></el-option>
									<el-option label="区域3" value="keshi3"></el-option>
									<el-option label="区域4" value="keshi4"></el-option>

								</el-select>
								<!-- <el-button @click="QueryDoc()">ok</el-button> -->
							</el-col>

							<el-col :span="12">
								<el-form-item label="号别" prop="haobie" style="width: 100%;">
									<el-select v-model="dataForm.haobie" placeholder="请选择号别" @change="QueryDoc()">
										<el-option label="专家号" value="专家号"></el-option>
										<el-option label="普通号" value="普通号"></el-option>
									</el-select>
								</el-form-item>
							</el-col>
						</el-form-item>

						<el-form-item label="看诊医生" prop="doctor">
							<el-select v-model="dataForm.doctor" placeholder="请选择看诊医生" filterable @change="QueryInfo()">
								<el-option v-for="doctor in doctorListEnd" :label="doctor" :value="doctor"></el-option>
							</el-select>
						</el-form-item>

						<el-form-item label="初始号额" prop="start_number">
							<el-input v-model="dataForm.start_number"></el-input>
						</el-form-item>

						<el-form-item label="剩余号额" prop="used_number">
							<el-input v-model="dataForm.used_number"></el-input>
						</el-form-item>

						<el-form-item label="应收金额" prop="money">
							<el-input v-model="dataForm.money"></el-input>
						</el-form-item>

						<el-form-item label="支付方式" prop="paid_approach">
							<el-select v-model="paid_approach" placeholder="请选择支付方式">
								<el-option label="现金" value="0"></el-option>
								<el-option label="微信" value="1"></el-option>
								<el-option label="支付宝" value="2"></el-option>
							</el-select>
						</el-form-item>


						<el-form-item>
							<el-button type="primary" @click="submitForm('dataForm')">提交</el-button>
							<el-button @click="resetForm('dataForm')">重置</el-button>
						</el-form-item>
					</el-form>

				</div>
			</el-col>
		</el-row>

	</el-container>
</template>

<script>
	import axios from 'axios';
	import {
		showMsgTitle
	} from '@/utils/api2'
	import {
		showMsgConfirm
	} from '@/utils/api2'
	import {
		getRequest
	} from '@/utils/api2'
	import {
		postRequest
	} from '@/utils/api2'


	let id = 0;
	export default {
		data() {
			return {
				ruleForm: {
					patid:'',		
					name: '',
					gender: '',
					birth: '',
					id_information: '',
					address: '',
					tel: '',
					age:'',
					
				},
				dataForm: {
					watchdate1: '',
					watchdate2: '',
					room: '',
					haobie: '',
					doctor: '',
					start_number: '',
					used_number: '',
					money: '',
				},
				doctorList: [],
				doctorListEnd:[],
				paid_approach:'',
				obj:{},
				objToWR:{},

				props: {
					lazy: true,
					lazyLoad(node, resolve) {
						const {
							level
						} = node;
						setTimeout(() => {
							const nodes = Array.from({
									length: level + 1
								})
								.map(item => ({
									value: ++id,
									label: `选项${id}`,
									leaf: level >= 2
								}));
							resolve(nodes);
						}, 1000);
					}
				},

				rules: {
					name: [{
						required: true,
						message: '请输入活动名称',
						trigger: 'blur'
					}, ],
					region: [{
						required: true,
						message: '请选择活动区域',
						trigger: 'change'
					}],
					date1: [{
						type: 'date',
						required: true,
						message: '请选择日期',
						trigger: 'change'
					}],
					date2: [{
						type: 'date',
						required: true,
						message: '请选择时间',
						trigger: 'change'
					}],
					type: [{
						type: 'array',
						required: true,
						message: '请至少选择一个活动性质',
						trigger: 'change'
					}],
					resource: [{
						required: true,
						message: '请选择活动资源',
						trigger: 'change'
					}],
					desc: [{
						required: true,
						message: '请填写活动形式',
						trigger: 'blur'
					}]
				}
			};
		},
		mounted: function() {
			
			// var user = this.$route.query.user;			
			// this.ruleForm.patid=user.patid;	
				this.ruleForm.patid=this.$route.query.user.patid;
				this.ruleForm.name=this.$route.query.user.name;
				this.ruleForm.gender=this.$route.query.user.gender;
				this.ruleForm.birth=this.$route.query.user.birth;
				this.ruleForm.id_information=this.$route.query.user.id_information;
				this.ruleForm.address=this.$route.query.user.address;
				this.ruleForm.tel=this.$route.query.user.tel;
				this.ruleForm.age=this.$route.query.user.age;
		},
		/***********************************************/
		methods: {
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.dataForm.watchdate1;
						alert('挂号成功');
					} else {
						console.log('error submit!!');
						return false;
					}
				});
				let url = "/queryList";
				let _this = this;
				getRequest(url).then(resp => {
					alert(resp.data.length)
					this.obj.rid = resp.data.length+1;
					this.objToWR.rid=this.obj.rid;
					
					})
				//alert(this.objToWR.rid)
				this.obj.name =this.ruleForm.name;
				this.obj.gender =this.ruleForm.gender;
				this.obj.age =this.ruleForm.age;
				this.obj.depname =this.dataForm.room;
				this.obj.docid =this.dataForm.docid;
				this.obj.date =this.dataForm.watchdate1;
				this.obj.patid =this.ruleForm.patid;				
				postRequest('/insertList', this.obj);
				this.objToWR.patid=this.ruleForm.patid;
				this.objToWR.name=this.ruleForm.name;
				this.objToWR.rid=this.obj.rid;
				//alert(this.objToWR.rid)
				this.objToWR.watchdate1=this.dataForm.watchdate1;
				this.objToWR.watchdate2=this.dataForm.watchdate2;
				this.objToWR.room=this.dataForm.room;
				this.objToWR.haobie=this.dataForm.haobie;
				this.objToWR.doctor=this.dataForm.doctor;
				this.$router.push({
					path: '/withdraw_registration',
					query: {
						obj: this.objToWR,
					},
					replace: true
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
			QueryDoc() {
				//alert('操作成功1');
				let url = "/querySchedul";
				let _this = this;
				getRequest(url).then(resp => {
					this.doctorList=[];
					if (this.dataForm.watchdate1.getDay() == 1) {
						// alert('操作成功2');
						// alert(this.dataForm.room);
						// alert(resp.data[0].depname);
						for (var i = 0; i < resp.data.length; i++) {
							//alert(resp.data[i].monday);
							//alert('操作成功3');
							if (this.dataForm.room == resp.data[i].depname&&this.dataForm.watchdate2 == resp.data[i].monday) {
								//alert('操作成功4');
								this.doctorList.push(resp.data[i].docname)								
							}
						}
						//alert(this.doctorList[0]);
					}
					if (this.dataForm.watchdate1.getDay() == 2) {
						for (var i = 0; i < resp.data.length; i++) {
							if (this.dataForm.room == resp.data[i].depname&&this.dataForm.watchdate2 == resp.data[i].tuesday) {
								this.doctorList.push(resp.data[i].docname)								
							}
						}
					}
					if (this.dataForm.watchdate1.getDay() == 3) {
						for (var i = 0; i < resp.data.length; i++) {
							if (this.dataForm.room == resp.data[i].depname&&this.dataForm.watchdate2 == resp.data[i].wednesday) {
								this.doctorList.push(resp.data[i].docname)								
							}
						}
					}
					if (this.dataForm.watchdate1.getDay() == 4) {
						for (var i = 0; i < resp.data.length; i++) {
							if (this.dataForm.room == resp.data[i].depname&&this.dataForm.watchdate2 == resp.data[i].thursday) {
								this.doctorList.push(resp.data[i].docname)								
							}
						}
					}
					if (this.dataForm.watchdate1.getDay() == 5) {
						for (var i = 0; i < resp.data.length; i++) {
							if (this.dataForm.room == resp.data[i].depname&&this.dataForm.watchdate2 == resp.data[i].friday) {
								this.doctorList.push(resp.data[i].docname)								
							}
						}
					}
					if (this.dataForm.watchdate1.getDay() == 6) {
						for (var i = 0; i < resp.data.length; i++) {
							if (this.dataForm.room == resp.data[i].depname&&this.dataForm.watchdate2 == resp.data[i].saturday) {
								this.doctorList.push(resp.data[i].docname)								
							}
						}
					}
					if (this.dataForm.watchdate1.getDay() == 0) {
						for (var i = 0; i < resp.data.length; i++) {
							if (this.dataForm.room == resp.data[i].depname&&this.dataForm.watchdate2 == resp.data[i].sunday) {
								this.doctorList.push(resp.data[i].docname)								
							}
						}
					}
				})
				let url2 = "/queryDoctor";
				_this = this;
				getRequest(url2).then(resp => {
					// alert(this.doctorList);
					// alert(resp.data[0].name);
					// alert(this.dataForm.haobie);
					// alert(resp.data[0].level);
					this.doctorListEnd=[];
					for (var j = 0; j < this.doctorList.length; j++) {
						//alert(this.doctorList[j]);
						// alert('操作成功2');
						// alert(this.dataForm.room);
						// alert(resp.data[0].depname);
						for (var i = 0; i < resp.data.length; i++) {
							//alert(resp.data[i].monday);
							//alert('操作成功3');
							if (this.doctorList[j] == resp.data[i].name&&this.dataForm.haobie == resp.data[i].level) {
								this.doctorListEnd.push(this.doctorList[j])								
							}
						}
						//alert(this.doctorList);
					}
					//alert(this.doctorListEnd);
				})
                     //alert(this.doctorListEnd);
				// for (var i = 0; i < resp.data.length; i++) {
				// 	if (this.dataForm.watchdate1.getDay() == 5 && resp.data[i].friday == this.dataForm.watchdate2 && this.dataForm.room = resp.data[i].depname) 
			}, //queryDoc end
			Query() {
				let url = "/queryPatient";
				let _this = this;
				getRequest(url).then(resp => {
					for (var i = 0; i < resp.data.length; i++) {
						if (this.ruleForm.patid == resp.data[i].patid) {
							this.ruleForm.name = resp.data[i].name;
							this.ruleForm.gender = resp.data[i].gender;
							this.ruleForm.birth = resp.data[i].birth;
							this.ruleForm.id_information = resp.data[i].id_information;
							this.ruleForm.address = resp.data[i].address;
							this.ruleForm.tel = resp.data[i].tel;
							this.ruleForm.age = resp.data[i].age;
						}
						if (this.ruleForm.patid == '') {
							_this.$message({
								type: 'error',
								message: '请输入病历号'
							});
						}
					}
			
				})
			}, //query end
			QueryInfo() {
				let url = "/queryDoctor";
				let _this = this;
				getRequest(url).then(resp => {
					for (var i = 0; i < resp.data.length; i++) {
						if (this.dataForm.doctor == resp.data[i].name.toString()) {
							this.dataForm.start_number = resp.data[i].quota
							this.dataForm.used_number = resp.data[i].quota-2
							this.dataForm.money = resp.data[i].fees
							this.dataForm.docid = resp.data[i].docid
						}
					}

				})
			}, //query end
		}
	}
</script>

<style>
	.el-header,
	.el-footer {
		background-color: #4fc1b0;
		color: #ffffff;
		text-align: left;
		line-height: 60px;
		font-size: 50px;
	}

	.el-main {
		background-color: #E9EEF3;
		color: #000000;
		text-align: left;
		line-height: 10px;
		font-size: 30px;
	}

	.el-row {
		margin-bottom: 20px;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.el-col {
		border-radius: 4px;
	}

	.bg-purple-dark {
		background: #99a9bf;
	}

	.bg-purple {
		background: #d3dce6;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.grid-content {
		border-radius: 4px;
		min-height: 36px;
	}

	.row-bg {
		padding: 10px 0;
		background-color: #f9fafc;
	}
</style>
